<template>
  <section id="newsEvent">
    <section class="sec-box min-h-screen news-event">
      <div class="width m-auto">
        <h2 class="margin-bottom-middle">Events</h2>
        <ul class="news-event-list">
          <li v-for="(item, index) in list" :key="index" @click.stop="doDetail(item)">
            <div>
              <h3 class="auto">{{ formatDate(item.createTime) }}</h3>
              <h3>{{ item.title }}</h3>
            </div>
            <div>
              <p class="auto">{{ item.author || '' }}</p>
              <p v-if="item.content" v-html="item.content"></p>
              <p v-else>{{ item.alt }}</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </section>
</template>
<script>
import HttpServer from '@/utils/http'
import { newsManageAPI } from '@/config/api'
import { formatDate } from '@/utils'
import { NewsCategory, NewsUrlCategory } from '@/constants/news'

import imgDefault from '@images/logo.png'

export default {
  name: 'cmpts-news-event',
  data() {
    return {
      formatDate,
      imgDefault,
      NewsCategory,
      NewsUrlCategory,
      list: [],
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    async queryData() {
      const { code, data } = await HttpServer.get(newsManageAPI.getList, {
        current: 1,
        size: 1000,
        title: '',
        category: NewsCategory.Event.value,
      })
      if (code == 200) {
        this.list = data.records
      }
    },
    doDetail(item) {
      if (item.urlType == NewsUrlCategory.self.value) {
        this.$router.push({
          path: `/news/${item.id}`,
        })
      } else {
        if (item.url) window.open(item.url)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.news-event-list {
  li {
    cursor: pointer;
    padding: @normal*5 0;
    border-bottom: 1px solid @borderColor;
    & > div {
      display: flex;
      flex: 1;
      .auto {
        flex: none;
        width: 30%;
      }
      & > h3,
      & > p {
        padding: @normal * 2 0;
      }
    }
  }
}
</style>
